<!--
 * @Author: liyin 2179253556@qq.com
 * @Date: 2022-12-10 10:23:59
 * @LastEditors: liyin 2179253556@qq.com
 * @LastEditTime: 2025-10-23 10:28:02
 * @FilePath: ExportModify.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div>
        <Model title="导入明细" :modelShow="props.showdialogVisible" width="70" @cancel="reactCancel"
            @confirm="modelConfirm">
            <div class="listItem">导入总条数：{{ props.ImportDate.length }}</div>
            <div class="listItem">可导入条数：
                <span style="color: #409EFF;">{{ props.ImportDate.length - props.errorNum }}</span>
            </div>
            <div class="listItem">失败条数：<span style="color: red;">{{ props.errorNum }}</span></div>
            <el-table :data="props.ImportDate.slice((currPage - 1) * pageSize, currPage * pageSize)"
                :header-cell-style="{ padding: '12px 0', background: '#F2F3F5' }" stripe border :max-height="480"
                ref="topictable" style="width: 100%">
                <el-table-column type="index" label="序号" align="center" width="60"></el-table-column>
                <el-table-column label="用户名称" align="center" show-overflow-tooltip>
                    <template v-slot="scope">
                        <span>{{ scope.row.account ? scope.row.account : '-' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="用户昵称" prop="name" align="center" show-overflow-tooltip>
                    <template v-slot="scope">
                        <span>{{ scope.row.name ? scope.row.name : '-' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="角色权限" align="center" show-overflow-tooltip>
                    <template v-slot="scope">
                        <span>{{ scope.row.role_name ? scope.row.role_name : '-' }}</span>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="所管学校" prop="school_name" align="center" show-overflow-tooltip>
                    <template v-slot="scope">
                        <span>{{ scope.row.school_name ? scope.row.school_name : '-' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="科目" prop="subject_name" align="center" show-overflow-tooltip>
                    <template v-slot="scope">
                        <span>{{ scope.row.subject_name ? scope.row.subject_name : '-' }}</span>
                    </template>
                </el-table-column> -->
                <el-table-column label="手机号码" prop="mobile_user" align="center" show-overflow-tooltip>
                    <template v-slot="scope">
                        <span>{{ scope.row.mobile_user ? scope.row.mobile_user : '-' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="头像" prop="inch" align="center" show-overflow-tooltip>
                    <template v-slot="scope">
                        <span>{{ scope.row.inch ? scope.row.inch : '-' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" prop="create_time" align="center" show-overflow-tooltip>
                    <template v-slot="scope">
                        <span>{{ scope.row.create_time ? scope.row.create_time : '-' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="过期时间" prop="expire_time" align="center" show-overflow-tooltip>
                    <template v-slot="scope">
                        <span>{{ scope.row.expire_time ? scope.row.expire_time : '-' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="错误信息" prop="msg" align="center" show-overflow-tooltip>
                    <template v-slot="scope">
                        <span style="color: red;">{{ scope.row.msg ? scope.row.msg : '-' }}</span>
                    </template>
                </el-table-column>
            </el-table>
            <div class="row align-items" style="justify-content: center;margin-top: 20px;">
                <el-pagination :current-page="currPage" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" background :page-size="pageSize"
                    :page-sizes="[10,20, 50, 100, 3000, 500, 1000]" layout="total, sizes, prev, pager, next, jumper"
                    :total="props.ImportDate.length">
                </el-pagination>
            </div>
        </Model>
    </div>
</template>
<script lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref, onMounted, reactive, watch } from 'vue'
import { confirmImportAccount } from '../Api/Operation'
interface PropsType {
    showdialogVisible: boolean
    ImportDate?: any
    errorNum?: number
}
const props = withDefaults(defineProps<PropsType>(), {
    showdialogVisible: false,
    ImportDate: [],
    errorNum: 1
})
interface EmitType {
    (e: 'modelCancel', bol: boolean): void
    (e: 'getList'): void
}
const emit = defineEmits<EmitType>()
const modelConfirm = async () => {
    const res: any = await confirmImportAccount()
    if (res.code !== 1) return ElMessage.error(res.msg)
    ElMessage.success('导入成功!')
    emit('getList')
    emit('modelCancel', false)
}
const reactCancel = () => {
    emit('modelCancel', false)
}
const pageSize=ref<number>(20)
const currPage = ref<number>(1)
const handleSizeChange = (val:any) => {
    //重置当前页为第一页
    pageSize.value = val
    currPage.value = 1
}
const handleCurrentChange = (val: any) => {
    //点击改变当前页
    currPage.value = val
}
onMounted(() => { })
</script>
<style lang="scss" scoped>
.listItem {
    display: inline-flex;
    font-size: 14px;
    color: #333333;
    margin-bottom: 15px;
    margin-right: 20px;
}

:deep(.table-coms-box) {
    padding: 0px
}

div :deep(.el-drawer) {
    width: 600px !important;

    .el-drawer__header {
        border-bottom: 1px solid #ececec;
    }

    .el-drawer__body {
        padding: 20px !important;
    }
}
</style>